import React from 'react'
import './layout.css'
import Head from 'next/head'
import Link from 'next/link'
import { Layout, Menu } from 'antd'
import { UploadOutlined, UserOutlined, VideoCameraOutlined } from '@ant-design/icons'

const { Header, Content, Footer, Sider } = Layout

class MyLayout extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    let { children, _key } = this.props
    return (
      <>
        <Head>
          <title>nextjs-antd-demo</title>
        </Head>
        <div className="home">
          <Layout style={{ height: '100%' }}>
            <Sider
              breakpoint="lg"
              collapsedWidth="0"
            >
              <div className="logo" />
              <Menu theme="dark" mode="inline" defaultSelectedKeys={[_key]}>
                <Menu.Item key="1" icon={<UserOutlined />}>
                  <Link href="/page1">
                    <a>nav 1</a>
                  </Link>
                </Menu.Item>
                <Menu.Item key="2" icon={<VideoCameraOutlined />}>
                  <Link href="/page2">
                    <a>nav 2</a>
                  </Link>
                </Menu.Item>
                <Menu.Item key="3" icon={<UploadOutlined />}>
                  <Link href="/page3">
                    <a>nav 3</a>
                  </Link>
                </Menu.Item>
                <Menu.Item key="4" icon={<UserOutlined />}>
                  <Link href="/page4">
                    <a>nav 4</a>
                  </Link>
                </Menu.Item>
              </Menu>
            </Sider>
            <Layout>
              <Header className="site-layout-sub-header-background" style={{ padding: 0 }} />
              <Content style={{ margin: '24px 16px 0' }}>
                <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
                  { children }
                </div>
              </Content>
              <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
            </Layout>
          </Layout>
        </div>
      </>
    )
  }
}

export default MyLayout